<template>
    <div class="app-main-container">
        <el-form style="float: left;margin-top: 15px;margin-left: 50px"
                 :inline="true"
                 :model="filter"
                 @keyup.enter.native="query()">
            <!--输入姓名-->
            <el-form-item :label="$t('common.name')">
                <el-input v-model="filter.userName"
                          :placeholder="$t('common.name')"
                          :clearable="true">
                </el-input>
            </el-form-item>
            <!--输入项目编号-->
            <el-form-item :label="$t('statistic.projectNumber')">
                <el-input v-model="filter.projectNumber"
                          :placeholder="$t('statistic.projectNumber')"
                          :clearable="true">
                </el-input>
            </el-form-item>
            <!--日期-->
            <el-form-item :label="$t('common.time')">
                <el-date-picker v-model="dailyTime"
                                type="daterange"
                                :start-placeholder="$t('common.startTime')"
                                :end-placeholder="$t('common.endTime')"
                                value-format="yyyy/MM/dd">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <!--查询-->
                <el-button @click="query()"
                           icon="el-icon-search">
                    {{$t('common.query')}}
                </el-button>
                <!--查看-->
                <el-button type="primary"
                           @click="view()"
                           icon="el-icon-view">
                    {{$t('common.view')}}
                </el-button>
                <!--编辑-->
                <el-button type="primary"
                           @click="update()"
                           icon="el-icon-edit">
                    {{$t('common.edit')}}
                </el-button>
                <!--删除-->
                <el-button  type="warning"
                            @click="del()"
                            icon="el-icon-delete">
                    {{$t('common.delete')}}
                </el-button>
                <!--导入-->
                <el-button type="primary"
                           @click="importData()"
                           icon="el-icon-upload2">
                    {{$t('common.importData')}}
                </el-button>
                <!--导出-->
                <el-button type="primary"
                           @click="exportData()"
                           icon="el-icon-download">
                    {{$t('common.exportData')}}
                </el-button>
            </el-form-item>
            <el-form-item style="margin-left: 100px">
                <!--全屏-->
                <el-tooltip :content="$t('common.fullScreen')" placement="right-end">
                    <i @click="clickFullscreen">
                        <el-col v-if="!isFullscreen">
                            <svg t="1611821307744" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5686" width="40" height="40"><path d="M85.333333 682.666667v128a128 128 0 0 0 128 128h128a42.666667 42.666667 0 0 0 0-85.333334H213.333333a42.666667 42.666667 0 0 1-42.666666-42.666666v-128a42.666667 42.666667 0 0 0-85.333334 0z m597.333334 256h128a128 128 0 0 0 128-128v-128a42.666667 42.666667 0 0 0-85.333334 0v128a42.666667 42.666667 0 0 1-42.666666 42.666666h-128a42.666667 42.666667 0 0 0 0 85.333334z m256-597.333334V213.333333a128 128 0 0 0-128-128h-128a42.666667 42.666667 0 0 0 0 85.333334h128a42.666667 42.666667 0 0 1 42.666666 42.666666v128a42.666667 42.666667 0 0 0 85.333334 0zM341.333333 85.333333H213.333333a128 128 0 0 0-128 128v128a42.666667 42.666667 0 0 0 85.333334 0V213.333333a42.666667 42.666667 0 0 1 42.666666-42.666666h128a42.666667 42.666667 0 0 0 0-85.333334z" p-id="5687"></path></svg>
                        </el-col>
                        <el-col v-if="isFullscreen">
                            <svg t="1611821670919" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6439" width="40" height="40"><path d="M704 864v-96c0-54.4 41.6-96 96-96h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-89.6 0-160 70.4-160 160v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64-704v96c0 89.6 70.4 160 160 160h96c19.2 0 32-12.8 32-32s-12.8-32-32-32h-96c-54.4 0-96-41.6-96-96v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z m-256 704v-96c0-89.6-70.4-160-160-160h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c54.4 0 96 41.6 96 96v96c0 19.2 12.8 32 32 32s32-12.8 32-32z m-64-704v96c0 54.4-41.6 96-96 96h-96c-19.2 0-32 12.8-32 32s12.8 32 32 32h96c89.6 0 160-70.4 160-160v-96c0-19.2-12.8-32-32-32s-32 12.8-32 32z" p-id="6440"></path></svg>
                        </el-col>
                    </i>
                </el-tooltip>
            </el-form-item>
        </el-form>
        <!--数据表格-->
        <el-table :data="dataList"
                  v-loading="dataListLoading"
                  @selection-change="handleSelectionChange"
                  @row-click="handleRowClick"
                  :row-key="id"
                  ref="statisticTable"
                  border
                  highlight-current-row
                  stripe
                  height="800"
                  style="width: 100%;">
            <el-table-column
                    type="selection"
                    :reserve-selection="true"
                    header-align="center"
                    align="center"
                    width="50">
            </el-table-column>
            <!--姓名-->
            <el-table-column prop="userName"
                             header-align="center"
                             align="center"
                             show-overflow-tooltip
                             :label="$t('common.name')">
            </el-table-column>
            <!--日期-->
            <el-table-column prop="dailyTime"
                             header-align="center"
                             align="center"
                             show-overflow-tooltip
                             :label="$t('common.date')">
            </el-table-column>
            <!--项目编号-->
            <el-table-column prop="projectNumber"
                             header-align="center"
                             align="center"
                             show-overflow-tooltip
                             :label="$t('statistic.projectNumber')">
            </el-table-column>
            <!--项目子模块-->
            <el-table-column prop="projectSubModule"
                             header-align="center"
                             align="center"
                             show-overflow-tooltip
                             :label="$t('statistic.projectSubmodule')">
            </el-table-column>
            <!--工作内容-->
            <el-table-column prop="jobContent"
                             header-align="center"
                             align="center"
                             :label="$t('statistic.workContent')" >
            </el-table-column>
            <!--用时-->
            <el-table-column prop="timeSpent"
                             header-align="center"
                             align="center"
                             :label="$t('statistic.timeCost')" >
            </el-table-column>
            <!--完成情况-->
            <el-table-column prop="completeStatus"
                             header-align="center"
                             align="center"
                             :label="$t('statistic.completion')" >
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.completeStatus === $appConstant.COMPLETE" type="success">{{$t('statistic.complete')}}</el-tag>
                    <el-tag v-if="scope.row.completeStatus === $appConstant.PROCESSING">{{$t('statistic.processing')}}</el-tag>
                    <el-tag v-if="scope.row.completeStatus === $appConstant.UNFINISHED" type="warning">{{$t('statistic.unComplete')}}</el-tag>
                </template>
            </el-table-column>
            <!--备注-->
            <el-table-column prop="remark"
                             header-align="center"
                             align="center"
                             show-overflow-tooltip
                             :label="$t('common.remark')">
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="page.pageIndex"
                       :page-sizes="pageSizes" :page-size="page.pageSize" :total="totalCount"
                       layout="total, sizes, prev, pager, next, jumper, slot">
        </el-pagination>
        <!--导入数据-->
        <upload-dialog v-if="uploadDialogVisible"
                       :type="type"
                       ref="uploadDialog"
                       @confirm="getDataList">
        </upload-dialog>
        <!-- 数据导出弹框 -->
        <data-export v-if="exportDialogVisible"
                     ref="exportDialog"
                     :field-list="fieldList"
                     @confirm="doExport">
        </data-export>
        <!-- 查看/编辑弹框 -->
        <info-dialog v-if="infoDialogVisible"
                     :operation="operation"
                     ref="infoDialog"
                     @confirm="getDataList">
        </info-dialog>
    </div>
</template>

<script>
  import UploadDialog from '@/components/dialog/upload'
  import DataExport from '@/components/dialog/data-export'
  import { deepCopy, exportExcel } from '@/utils'
  import { apiDefaultErrorHandler } from '../../api/base'
  import { getPage, getPageSizes, getSelectedIdList, getSelectedIds, getDeleteAfterPageNumber, getSelectedId } from '@/utils/table'
  import { confirmDel, success } from '@/utils/message'
  import InfoDialog from './info'
  import operationApi from '@/api/operation/operation'
  import screenfull from 'screenfull'

  export default {
    name: 'export',
    components: {
      UploadDialog, DataExport, InfoDialog
    },
    data() {
      return {
        filter: {
          userName: '',
          projectNumber: '',
          startTime: '',
          endTime: ''
        },
        dailyTime: [],
        dataList: [],
        dataListSelections: [],
        page: getPage(),
        pageSizes: getPageSizes(),
        totalCount: 0,
        dataListLoading: false,
        uploadDialogVisible: false,
        type: '',
        completeStatus: 0,
        fieldList: [],
        exportDialogVisible: false,
        infoDialogVisible: false,
        operation: '',
        //默认不全屏
        isFullscreen: false
      }
    },
    created() {
      this.query()
    },
    methods: {
      // 按筛选条件查询列表
      query() {
        this.page.pageIndex = this.$appConstant.GENERAL_GLOBAL_YES
        // 若存在范围时间，将其分为起止时间
        if (this.dailyTime) {
          this.filter.startTime = this.dailyTime[0]
          this.filter.endTime = this.dailyTime[1]
        } else {
          this.filter.startTime = ''
          this.filter.endTime = ''
        }
        this.search = deepCopy(this.filter)
        this.getDataList()
      },
      // 获取数据列表
      getDataList() {
        let params = Object.assign(deepCopy(this.page), this.search)
        this.dataListLoading = true
        operationApi.getDailyList(params).then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            this.dataList = data.page.list
            this.totalCount = data.page.totalCount
          } else {
            apiDefaultErrorHandler(data)
          }
          this.dataListLoading = false
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
          this.dataListLoading = false
        })
      },
      // 打开查看弹框
      view() {
        let id = getSelectedId(this.dataListSelections, 'id')
        debugger
        if (id == null) {
          return
        }
        this.infoDialogVisible = true
        this.operation = 'view'
        this.$nextTick(() => {
          this.$refs.infoDialog.init(id)
        })
      },
      //编辑员工信息
      update() {
        let id = getSelectedId(this.dataListSelections, 'id')
        if (id == null) {
          return
        }
        this.infoDialogVisible = true
        this.operation = 'update'
        this.$nextTick(() => {
          this.$refs.infoDialog.init(id)
        })
      },
      // 删除员工
      del() {
        let ids = getSelectedIds(this.dataListSelections, 'id')
        if (ids == null) {
          return
        }
        confirmDel().then(() => {
          operationApi.deleteUser(ids).then(({data}) => {
            if (this.$http.isResponseSuccess(data)) {
              success(this.$t('common.success'), () => {
                // 删除最后一页的最后一条数据时跳转到上一页
                let params = {
                  totalCount: this.totalCount,
                  pageSize: this.page.pageSize,
                  currentIndex: this.page.pageIndex,
                  deleteSize: ids.length
                }
                this.page.pageIndex = getDeleteAfterPageNumber(params)
                this.getDataList()
              })
            } else {
              apiDefaultErrorHandler(data)
            }
          }).catch((ex) => {
            apiDefaultErrorHandler(ex)
          })
        }).catch(() => {
        })
      },
      //导入
      importData() {
        this.uploadDialogVisible = true
        this.type = this.$appConstant.DATA_IMPORT_FILE_TYPE_DAILY
        this.$nextTick(() => {
          this.$refs.uploadDialog.dialogVisible = true
        })
      },
      /**
       * 打开数据导出弹框
       */
      exportData() {
        this.fieldList = [
          {
            field: 'userName',
            name: this.$t('common.name'),
            custom: false,
            customList: []
          },
          {
            field: 'dailyTime',
            name: this.$t('common.date'),
            custom: false,
            customList: []
          },
          {
            field: 'projectNumber',
            name: this.$t('statistic.projectNumber'),
            custom: false,
            customList: []
          },
          {
            field: 'projectSubModule',
            name: this.$t('statistic.projectSubmodule'),
            custom: false,
            customList: []
          },
          {
            field: 'jobContent',
            name: this.$t('statistic.workContent'),
            custom: false,
            customList: []
          },
          {
            field: 'timeSpent',
            name: this.$t('statistic.timeCost'),
            custom: false,
            customList: []
          },
          {
            field: 'completeStatus',
            name: this.$t('statistic.completion'),
            custom: true,
            customList: [
              {value: this.$appConstant.COMPLETE, label: this.$t('statistic.complete')},
              {value: this.$appConstant.PROCESSING, label: this.$t('statistic.processing')},
              {value: this.$appConstant.UNFINISHED, label: this.$t('statistic.unComplete')}
            ]
          },
          {
            field: 'remark',
            name: this.$t('common.remark'),
            custom: false,
            customList: []
          }
        ]
        this.fieldList = this.fieldList.filter(item => item.show !== false) // 筛选需要显示的字段
        this.exportDialogVisible = true
        this.$nextTick(() => {
          this.$refs.exportDialog.init()
        })
      },
      /**
       * 导出
       */
      doExport(value) {
        // 若存在范围时间，将其分为起止时间
        if (this.dailyTime) {
          this.filter.startTime = this.dailyTime[0]
          this.filter.endTime = this.dailyTime[1]
        } else {
          this.filter.startTime = ''
          this.filter.endTime = ''
        }
        let id = getSelectedIdList(this.dataListSelections).join(',')
        let sheetName = this.$t('common.fileName')
        let fileName = sheetName + '.xlsx'
        let filter = JSON.stringify(this.filter)
        let fieldList = JSON.stringify(value)
        let param = {
          id: id,
          sheetName: sheetName,
          filter: filter,
          fieldList: fieldList
        }
        operationApi.doExport(param).then(({data}) => {
          exportExcel(fileName, data)
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
          this.dataListLoading = false
        })
      },
      // 每页数
      handleSizeChange(val) {
        this.page.pageSize = val
        this.page.pageIndex = this.$appConstant.GENERAL_GLOBAL_YES
        this.getDataList()
      },
      // 当前页
      handleCurrentChange(val) {
        this.page.pageIndex = val
        this.getDataList()
      },
      // 多选
      handleSelectionChange(val) {
        this.dataListSelections = val
      },
      // 点击某一行
      handleRowClick(row) {
        this.dataListSelections.push(row)
        this.$refs.statisticTable.toggleRowSelection(row)
      },
      id(row) {
        return row.id
      },
      //全屏
      clickFullscreen(){
        this.isFullscreen = !this.isFullscreen
        screenfull.toggle();
      }

    }
  }
</script>

<style scoped>

</style>